import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { Alert, Badge, Button, Calendar, Card, Checkbox, Drawer, Form, Input, message, Modal, Radio } from 'antd';
import { currentUser} from './service';

import { Image } from 'antd';
import moment, { Moment } from 'moment';
import { history } from 'umi';
interface Props {}
/** 问题
 * 1. 页面加载 赋初值userInfo 会有延时问题 导致表单初始值赋不上
 * @returns
 *
 *
 *
 */
interface dateObj{
  value: Moment,
  selectedValue:Moment
}
const BasicInfo: FC<Props> = () => {
  const [userInfo, setUserInfo] = useState();

  const getUserInfo = () => {
    currentUser({ user_id: localStorage.getItem('user_id') }).then(res => {
      setUserInfo({ ...res.data });
    });
  };
  useEffect(() => {
    getUserInfo();
  }, []);

  //日期
    const [date,setDate] = useState<dateObj>({
      value: moment('2017-01-25'),
      selectedValue: moment('2017-01-25'),
    })
    const onSelect = (value:any)=> {
      setDate({
         ...date,
        value,
        selectedValue: value,
      });
    };
    const onPanelChange =(value:any) => {
      setDate({ ...date,value });
    };
    //累计签到天数
    const [total,setTotal] = useState(0);
    //签到按钮方法
    function sign(){
      console.log('签到')
      setTotal(1)
    }
    // 礼物兑换抽屉
    const [visible, setVisible] = useState(false);
    const showDrawer = () => {
      setVisible(true);
    };
    const onClose = () => {
      setVisible(false);
    };
    //兑换礼品
    const exchange =(value:any) => {
        //立即兑换
        showModal()
    };
    //立即兑换弹框
    const showModal = () => {
      history.push('/client/Signer');
    };
    //日历
    function getListData(value) {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
          ];
          break;
        case 10:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
            { type: 'error', content: 'This is error event.' },
          ];
          break;
        case 15:
          listData = [
            { type: 'warning', content: 'This is warning event' },
            { type: 'success', content: 'This is very long usual event。。....' },
            { type: 'error', content: 'This is error event 1.' },
            { type: 'error', content: 'This is error event 2.' },
            { type: 'error', content: 'This is error event 3.' },
            { type: 'error', content: 'This is error event 4.' },
          ];
          break;
        default:
      }
      return listData || [];
    };
    function dateCellRender(value) {
      // dateCellRender是遍历渲染出来的
      const listData = getListData(value);
      return listData.length > 0 && <Badge status={'error'} />;
    };
    function getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    };
  
    function monthCellRender(value) {
      const num = getMonthData(value);
      return num ? (
        <div className="notes-month">
          <section>{num}</section>
          <span>Backlog number</span>
        </div>
      ) : null;
    };
    const OnSelect = value => {
      // showDrawer()
       
    };
    const gift = [
      {
        day:'签到40天',
        name:'卡通手提毛巾',
        remark:"礼品精美方便携带",
        img:'	https://gd4.alicdn.com/imgextra/i4/2020787321/O1CN01kjj04u23x4Kfsyozk_!!2020787321.jpg'
      },
      {
        day:'签到70天',
        name:'卡通小电风扇',
        remark:"礼品精美方便携带",
        img:'	https://gd1.alicdn.com/imgextra/i4/808891691/O1CN01BTyBdb1OMWUO6syqx_!!808891691.jpg'


      },
      {
        day:'签到100天',
        name:'卡通小夜灯',
        remark:"礼品精美方便携带",
        img:'https://gd3.alicdn.com/imgextra/i3/771056402/O1CN01yeQDOE1xAAJsBm6l8_!!771056402.jpg'

      },
      {
        day:'签到150天',
        name:'卡通大热水壶',
        remark:"礼品精美方便携带",
        img:'https://gd2.alicdn.com/imgextra/i2/2206435428961/O1CN01SFyjT72G4Bs4N2u15_!!2206435428961.jpg'

      },
      
    ]
  return (
    <div className={style.container}>

      {/* 标题 */}
      <div className={style.title}>
        <div className={style.left}>
          每日签到
        </div>
        <div className={style.right}>
          签到规则
        </div>
      </div>

      <div className={style.content}>
        {/*左*/}
        <div className={style.left}> 
          <div className={style.top}>

            <div className={style.title_one}>
              <div className={style.number}>您好</div>
              <div className={style.data}>点亮你在社区的每一天!</div>
            </div>

            <div className={style.title_two}>
              <div className={style.number}>{total}</div>
              <div className={style.data}>累计签到天数</div>
            </div>

          </div>
          <div className={style.bottom}>
            <Alert
              message={`你选择的日期: ${date?.selectedValue && date?.selectedValue.format('YYYY-MM-DD')}`}
            />
            {/* <Calendar value={date.value} onSelect={onSelect} onPanelChange={onPanelChange} /> */}
            <div className={style.cal}>
              <Calendar
                dateCellRender={dateCellRender}
                monthCellRender={monthCellRender}
                onSelect={OnSelect}
              />
            </div>
          </div>
        </div>

        {/*右*/}
        <div className={style.right}>
          <div className={style.top}>
            {/* <div className={style.buttonSign}>我要签到</div> */}
            <Button 
            type="primary" 
            style={{marginTop:'11%',height:'50%',width:'65%',fontSize:20,background:'#e8f3ff',fontWeight:'bold',color:"black",marginLeft:'60px'}}
            onClick={sign}
            >我要签到</Button>
            <Button 
            type="primary" 
            style={{marginTop:'11%',height:'50%',width:'65%',fontSize:20,background:'#e8f3ff',fontWeight:'bold',color:"black",marginLeft:'60px'}}
            onClick={showDrawer}
            >礼物兑换</Button>
          </div>
          <div className={style.bottom}>
            <div className={style.title_three}>宜沟通交流</div>
            <div className={style.title_four}>看得懂书请仔细看，看不懂的书硬着头皮看</div>
          </div>
          <div className={style.photo}>
          </div>
        </div>
      </div>

      {/* 抽屉 */}
      <Drawer  className='giftBox' title="签到礼物兑换" placement="right" onClose={onClose} visible={visible} width={400}>

        {gift.map((item, index) => (
          <div key={index}>
            <h3>{item.day}</h3>
            <div className='gift' style={{border:'1px solid  rgb(230,232,235)',height:'150px',display:'flex'}}>  
              <div>
                  <Image
                    width={150}
                    src={item.img}
                  />
                  </div>          
              <div className='gift_right' style={{border:'1px solid rgb(230,232,235)',height:"150px",width:'100%',padding: '7px'}}>
                <div style={{height:"50px",marginTop:'30px',fontSize:'20px',fontWeight:'bold'}}>{item.name}</div>
                <div style={{height:"20px",color:'orange',width:'42%',}}>{item.remark}</div>
                <Button 
                  type='primary' 
                  style={{border:'1px solid',borderRadius:'20px',marginTop:'10px',float:'right'}}               
                  onClick={(item) => {
                    exchange(item)
                }}>
                  兑换</Button>
              </div>
            </div>
          </div>

        ))}

      </Drawer>

    </div>
  );
};

export default BasicInfo;
